<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据查询端</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="https://mirror.fe80.cn/layui/2.6.8/css/layui.css"  media="all">

  <style type="text/css">
    body{
        background-color: #f9f9fc;
    }
     .layui-container{
         max-width: 600px;
         margin: 20px auto;
         background-color: #f3f3fc;
         border-radius: 10px;
         padding-bottom: 50px;
         padding: 0 8px;
     }
     .layui-form{
        background-color: #fff;
        padding: 20px 6px 50px 6px;
        border-radius: 20px;
     }
     .layui-input-block-line{
         margin-left: 0px;
     }
     .layui-input-full{
         width: 100%;
     }
     .layui-input{
        font-size: 20px;
        height: 42px;
     }
     .layui-btn{
        height: 42px;
        font-size: 18px;
     }
    .mainbox{
        max-width: 600px;
        margin: auto;
    }
    .ihead {
        text-align: center;
    }

    .ihead span:first-child {
        font-size: 28px;
        font-weight: bold;
        color: #864295;
    }

    .ihead span:nth-child(2) {
        font-size: 20px;
        font-weight: bold;
    }

    .ibody {
        margin-top: 20px;
        padding-left: 8px;
        padding-right: 4px;
        line-height: 34px;
        font-size: 19px;
    }

    .ibody div {
        border-bottom: 1px dashed #919199;
    }

    .ibody div span:first-child {
        margin-left: 10px;
    }

    .ibody div span:nth-child(2) {
        color: #00f;
        float: right;
        margin-right: 10px;
    }

    .ibody div.empty {
        height: 5px;
    }

    .blue {
        color: #00f;
    }

    .red {
        color: #e60c03 !important;
    }

    .green {
        color: #277e2d !important;
    }
    .spring {
        color: #8B7500 !important;
    }
</style>
</head>
<body>
<div class="layui-container">

<!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据查询</legend>
</fieldset> -->

<form class="layui-form" action="">
    <!-- <blockquote class="layui-elem-quote layui-quote-nm">
        请填写身份证号码查询
    </blockquote> -->
    <div style="height: 32px;"></div>
  <div class="layui-form-item">
      <div class="layui-input-block layui-input-block-line">
        <input type="text" name="card" lay-verify="card" placeholder="请输入信息" autocomplete="off" class="layui-input">
      </div>
  </div>

  <div class="layui-form-item bottom-operate">
        <button class="layui-btn layui-btn-normal layui-input-full" lay-submit="" lay-filter="submit">立即查询</button>
  </div>

  <div class="mainbox">
    <div class="ihead"><span>查询结果</span></div>
    <div class="ibody">
        <div><span>语文:</span><span class="red">00分</span></div>
        <div><span>数学:</span><span>00分</span></div>
        <div><span>英语:</span><span>00分</span></div>
        <div><span>生物:</span><span>00分</span></div>
        <div><span>历史:</span><span class="green">00分</span></div>
        <div><span>地理:</span><span class="green">00分</span></div>
        <div><span>物理:</span><span class="green">00分</span></div>
        <div><span>道法:</span><span class="green">00分</span></div>
        <div><span>化学:</span><span class="green">00分</span></div>
        <div><span>总分数:</span><span class="green">00分</span></div>
        <div><span>查询时间:</span><span class="spring">2024-01-01 12:00:00</span></div>
        <div class="empty"></div>
    </div>
  </div>
</form>
</div>
<script src="https://mirror.fe80.cn/layui/2.6.8/layui.js" charset="utf-8"></script>
<script>
layui.use(['form','layer'], function(){
    var form = layui.form,$=layui.jquery,layer = layui.layer;
    //自定义验证规则
    form.verify({
    card: function(value){
        if(/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/.test(value)==false){
            return '请输入18位身份证号码';
        }
    }
    });

    //监听提交
    form.on('submit(submit)', function(data){
        var load = layer.load(2);
        let color = "";
        data.field.test = window.location.href.includes('test') ? 1 : 0;
        $.post("https://i.fe80.cn/portal/dun/scores.html",data.field,function(res){
            layer.close(load);
            if( res.code != 2){
                // layer.alert(res.msg,{icon:res.code});
                layer.msg(res.msg,{icon:res.code});
                $(".ibody").empty();
                $.each(res.column,function(index,item){
                    let sc = item.value.replace("分","");
                    if(sc >=90 && sc <=150){
                        color = " class=\"red\"";
                    }
                    if(sc >=60 && sc < 90){
                        color = " class=\"blue\"";
                    }
                    if(sc >=0 && sc < 60){
                        color = " class=\"green\"";
                    }
                    if(item.value.length == 19){
                        color = " class=\"spring\"";
                    }
                    $(".ibody").append("<div><span>"+item.name+":</span><span"+color+">"+item.value+"</span></div>");
                });
                $(".layui-form-item").hide();
                $(".ibody").append("<div class=\"empty\"></div>");
            }else{
                layer.alert(res.msg,{icon:res.code});
            }
        }).error(function(){
            layer.close(load);
            layer.alert("服务器错误！请稍后再试",{icon:5,title:'服务器错误'});
        });
        return false;
    });
});

</script>
</body>
</html>
